<template>
    <div>
        <el-button round type="success" @click="findAll"> 刷新</el-button>
        <el-button round type="danger" @click="deleteBySelect"> 批量删除</el-button>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column prop="menuImg" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.menuImg" style="width: 100px;height: 100px"/>
                </template>
            </el-table-column>
            <el-table-column prop="dishName" label="菜名"></el-table-column>
            <el-table-column prop="dishNum" label="数量">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.dishNum" @change="update(scope.row)" :min="0" :max="scope.row.number" label="描述文字"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="disPrice" label="单价"></el-table-column>
            <el-table-column prop="restaurantname.restaurantName" label="餐厅名称"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                    <!-- <el-button type="success" size="mini" @click="update(scope.row)">确认修改</el-button>  -->
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px;margin-right: -700px" >
            <span>合计：{{this.totalPrice}}</span>
            <!--            <el-button round @click="payMoney" style="background-color: coral;color: white">支付</el-button>-->
            <el-button round @click="payMoney()" style="background-color: coral;color: white">支付</el-button>
        </div>

        <!--         订单详情弹出框-->
        <el-dialog title="信息" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
            <el-form label-width="100px" size="small" style="width: 90%">
                <el-form-item label="订单编号">
                    <el-input v-model="form.no" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单时间">
                    <el-date-picker v-model="form.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="支付状态">
                    <el-input v-model="form.status" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单总价">
                    <el-input v-model="form.totalPrice" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

        <!--分页模块-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>
    </div>
</template>

<script>
    export default {
        name: "shopcar",
        data() {
            return {
            /*分页数据块*/
            // 当前页面
            currentPage:1,
            // 控制每页显示的数据条数
            pageSizes:[5,10,15,20],
            //每页显示数据数
            pageSize:5,
            // 数据总条数
            total:0,

            // 菜单表格
            shopCarTable:[],

            tableData:[],
            multipleSelection: [],
            totalPrice:0,

            form: {},
            dialogFormVisible: false,


        }
    },
        // 页面加载事件
        created() {
            this.findAll()
        },

        methods:{

            save() {
                this.request.post("/orders", this.form).then(res => {
                    if (res.code === '200') {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error("保存失败")
                    }
                })
            },

            pay() {
                var  subject="";
                var  traceNo="";
                for (let i = 0; i <this.multipleSelection.length; i++) {
                    subject=subject+this.multipleSelection[i].dishName
                    traceNo=this.multipleSelection[i].id
                }

                const url = this.$http+`/shopcar/pay?subject=${subject}&traceNo=${traceNo}&totalPrice=${this.totalPrice}`
                console.log("url==>"+url)
                window.open(url);  //  得到一个url，这个url就是支付宝支付的界面url, 新窗口打开这个url就可以了
            },
            returnPay(row) {
                const url = this.$http+`/alipay/return?totalPrice=${this.totalPrice}&alipayTraceNo=${row.alipayNo}&traceNo=${row.no}`
                console.log("url==>"+url)
                this.$http.get(url).then(res => {
                    if(res.code === '200') {
                        this.$message.success("退款成功")
                    }  else {
                        this.$message.error("退款失败")
                    }
                    this.load()
                })
            },

            // 购买
            payMoney(){
                 this.$http.post("/shopcar/payMoney?totalPrice="+this.totalPrice,this.multipleSelection).then(res=>{
                    console.log(res)
                     if (res.data.code===2000){
                         this.$message.success(res.data.msg);
                     }else{
                         this.$message.error(res.data.msg);
                     }
                     this.findAll();
                 })
            },



            // 修改数量
            update(row){
                this.$http.post("/shopcar/updateById",row).then(res=>{
                    this.findAll();
                    this.totalPrice=0;
                })
            },

            // 多选按钮 计算总价
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.totalPrice=0
                for (let i = 0; i <this.multipleSelection.length; i++) {
                    this.multipleSelection[i].dishTotalPrice=this.multipleSelection[i].dishNum*this.multipleSelection[i].disPrice;
                    this.totalPrice= this.totalPrice+this.multipleSelection[i].dishTotalPrice;
                }
                if (val==""){
                    this.totalPrice=0
                }
                console.log(this.multipleSelection)


            },

            // 批量删除
            deleteBySelect(){
                this.$http.post("/shopcar/deleteBySelect",this.multipleSelection).then(res=>{
                    if (res.data.code===2000){
                        this.$message.success(res.data.msg);
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.findAll();
                })

            },

            // 删除
            del(id){
                this.$http.get("/shopcar/deleteById?id="+id).then(res=>{
                    if (res.data.code===2000){
                        this.$message.success(res.data.msg);
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.findAll();
                })
            },

            // 查询购物车
            findAll() {
                // this.$http.post("/order/search/"+this.currentPage+"/"+this.pageSize,this.searchForm).then(res => {
                this.$http.get("/shopcar/findAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(res => {
                    console.log(res)
                    this.tableData = res.data.data
                    this.total = res.data.data.total
                    this.totalPrice=0

                })
            },
            // 分页组件方法，每页的数据条数
            handleSizeChange(val) {
                this.pageSize=val;
                this.findAll();
            },
            // 当前页是第几页
            handleCurrentChange(val) {
                this.currentPage=val;
                this.findAll();
            },

        },
    }
</script>

<style scoped>


</style>